<template>
  <!-- carousel -->
  <section id="carousel">
    <span class="pattern"></span>
    <div class="main-text">云原生微应用开发框架</div>
    <div class="sub-text">
      <ul class="slide-text">
        <li>致力于培育和维护一个厂商中立的开源生态系统</li>
        <li>推广云技术的最佳实践，促进技术普惠得以实现</li>
      </ul>
    </div>
    <div id="wrapper-slider">
      <div id="controls">
        <div class="prev"></div>
        <div class="next"></div>
      </div>
    </div>
    <a href="index.html#portfolio"
       class="scroll-btn anchor"></a>
  </section>
  <div id="portfolio-box">
    <div class="spinner"></div>
    <div class="inner"></div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent } from "vue";
export default defineComponent({
  name: "i-carousel",
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>
</style>
